<template>
  <div class="app-container d-flex">
    <!-- 快捷入口 -->
    <div class="left-box flex-1">
      <div class="item-block shortcut bg-white">
        <div class="title d-flex ai-center">
          <i class="el-icon-menu" />
          <span class="fs-l">快捷功能入口</span>
        </div>
        <div class="body fs-l d-flex flex-wrap text-center">
          <template v-for="item in shortcutList">
            <div class="item d-flex fd-column" :key="item.name" @click="$router.push({ name: item.routerName })">
              <img :src="item.src" />
              <span>{{ item.title }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right-box">
      <!-- 用户信息 -->
      <div class="person-info item-block bg-white">
        <div class="title d-flex ai-center">
          <i class="el-icon-user-solid" />
          <span class="fs-l">个人信息</span>
        </div>
        <div class="body fs-md">
          <div class="d-flex ai-center person-info-avatar">
            <el-avatar :size="40" :src="sessionUser.avatar">
              <i class="el-icon-s-custom fs-xxxl"></i>
            </el-avatar>
            <span class="person-info-name">{{ sessionUser.realName }}</span>
          </div>
          <div>手机号码: {{ sessionUser.mobile }}</div>
          <div v-for="(item, i) in personInfo" :key="i" class>
            {{ item.label }}:
            {{
              sessionUser.extProps[item.key] && sessionUser.extProps[item.key] !== 'null'
                ? sessionUser.extProps[item.key]
                : item.default
            }}
          </div>
          <div>会员版本: {{ vipInfo.vipName }}</div>
          <div>到期时间: {{ vipInfo.endDate | parseDate(false) | empty }}</div>
        </div>
      </div>
      <!-- 专属客服 -->
      <div class="conect-way bg-white">
        <customer-service></customer-service>
        <div class="body">
          <div class="tips fs-md">
            <div>可加微信联系客服</div>
            <div class="d-flex tips-time">
              <div>工作时间：</div>
              <div>
                <div>周一至周日</div>
                <div>上午9点至晚上9点</div>
              </div>
            </div>
          </div>
          <el-image class="qcode" :src="require('@/assets/images/qr.jpg')"></el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getMemberList } from '../../api/user';
import constant from '@/utils/constant';
import CustomerService from '@/components/CustomerService';

export default {
  components: {
    CustomerService
  },
  data() {
    return {
      customerBool: false,
      personInfo: [
        { label: '门店品牌', key: 'storeName', default: '--' },
        { label: '门店地址', key: 'storeAdress', default: '--' }
      ],
      vipInfo: {
        vipName: '',
        endDate: ''
      },
      shortcutList: [
        { src: require('@/assets/images/icons/home_shortcut_move@1x.png'), routerName: 'moveHouse', title: '房源搬家' },
        {
          src: require('@/assets/images/icons/home_shortcut_port@1x.png'),
          routerName: 'portManagement',
          title: '端口管理'
        },
        {
          src: require('@/assets/images/icons/home_shortcut_publish@1x.png'),
          routerName: 'PublishHouseList',
          title: '出售发房'
        },
        { src: require('@/assets/images/icons/home_shortcut_rent@1x.png'), routerName: 'rentHouse', title: '出租发房' },
      ],
    };
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'device', 'sessionUser'])
  },
  mounted() {
    gio('track', constant.HOME_PAGE_VIEW);

    this.initList();
  },
  methods: {
    hookUpdateHanlde(e) {
      console.log(e);
    },

    initList() {
      getMemberList({
        currentPage: 1,
        pageSize: 1,
        t: {
          memberAgentId: this.sessionUser.id
        }
      }).then(({ content }) => {
        let names = {
          '0': '超级会员',
          '1': '会员已禁用',
          '2': '会员已过期',
          '3': '普通用户'
        };

        this.vipInfo.vipName = names[content.statue];
        this.vipInfo.endDate = content.statue == '3' ? '' : content.endDate;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  background: #f6f6f6;

  .iconfont.iconweixin,
  .el-icon-menu,
  .el-icon-user-solid {
    font-size: 30px;
    color: #46a0fc;
    margin-right: 5px;
  }

  .iconfont.iconweixin {
    color: #64e69d;
    position: relative;
    top: -3px;
  }

  .shortcut {
    .body {
      margin-top: 50px;
      .item {
        cursor: pointer;
        margin-left: 40px;
        span {
          margin-top: 16px;
        }
      }
    }
  }

  .item-block {
    min-height: 280px;
    padding: 20px;
  }

  .right-box {
    width: 350px;
    margin-left: 20px;

    .person-info {
      height: 280px;

      .body {
        margin-top: 20px;
        line-height: 30px;
      }

      .person-info-avatar {
        padding-bottom: 10px;

        .person-info-name {
          margin-left: 10px;
        }
      }
    }

    .conect-way {
      margin-top: 20px;
      .body {
        display: flex;
        flex-wrap: nowrap;
        padding: 0 30px 20px;

        .tips {
          flex: 1;
          padding-top: 20px;

          .tips-time {
            line-height: 1.5;
            margin-top: 16px;
          }
        }

        .qcode {
          width: 100px;
          height: 100px;
        }
      }
    }
  }
}
</style>
